<div class="crayons-card notification">
  <div class="flex items-center">
    <% cache "activity-profile-pic-#{notification.user_id}-#{notification.user_profile_image_90}" do %>
      <%= render "notifications/shared/profile_pic", json_data: notification.json_data %>
    <% end %>
    <div class="notification__content">
      <%# title is blank when it's a comment with only an image, for example %>
      <% title = if notification.reactable_title.present?
                   sanitize(notification.reactable_title)
                 elsif notification.reactable_type.present?
                   t("views.notifications.reacted.your.#{notification.reactable_type.downcase}")
                 else
                   t("views.notifications.reacted.your.unknown")
                 end %>

      <% title_link = link_to(title, notification.reactable_path, class: "crayons-link fw-bold") %>

      <%= t("views.notifications.reacted.verb_html",
            count: 1,
            start: "",
            actors: link_to(notification.user_name, notification.user_path, class: "crayons-link fw-bold"),
            title: title_link,
            end: "",
            reactions: tag.span(image_tag(reaction_image(notification.reaction_category),
                                          class: "reaction-image mx-1 reaction-icon--#{notification.reaction_category}",
                                          title: t("views.reactions.category.#{notification.reaction_category}")))) %>
    </div>
  </div>
</div>
